<template>
  <div class="console-container">
    <ul>
      <li>
        <h3>概览</h3>
        <card-list></card-list>
      </li>
      <li>
        <h3>数据任务<router-link to='/monitorAssay/taskFlow'><svg-icon icon-class="more"></svg-icon></router-link></h3>
        <data-task></data-task>
      </li>
      <li>
        <h3>数据服务<router-link to='/monitorAssay/serverAction'><svg-icon icon-class="more"></svg-icon></router-link></h3>
        <data-server></data-server>
      </li>
      <li>
        <h3>数据治理<router-link to='/dataGovernance'><svg-icon icon-class="more"></svg-icon></router-link></h3>
        <data-governance></data-governance>
      </li>
      <li style='margin-bottom:0'>
        <h3>数据组件<router-link to='/dataComponent'><svg-icon icon-class="more"></svg-icon></router-link></h3>
        <data-component></data-component>
      </li>
    </ul>
  </div>
</template>

<script>
	
import { CardList, DataTask, DataServer, DataGovernance, DataComponent } from './components'
export default {
  components: {
    CardList,
    DataTask,
    DataServer,
    DataGovernance,
    DataComponent
  },
  data() {
    return {
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .console-container {
    padding: 20px 20px 0 20px;
    padding-bottom: 20px;
    &>ul>li {
      list-style: none;
      margin-bottom: 20px;
      padding: 0 20px 20px 20px;
      background: #fff;
      color: #666;
      h3 {
        font-size: 18px;
        line-height: 60px;
        height: 60px;
        color: #333;
        font-weight: 400;
        .svg-icon {
          float: right;
          margin-top: 18px;
          cursor: pointer;
          color: #009ce3;
          font-size: 25px;
        }
      }
    }
  }
</style>